<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .box {
            border: 2px solid black;
            padding: 40px;
            margin-bottom: 40px;
        }
    </style>
</head>

<body>
    <div id="app" class="box">
        <h3>组件A</h3>
        <comp-b></comp-b>
        <comp-c></comp-c>
    </div>

    <template id="CompB">
        <div class='box'>
            <h3>组件B</h3>
            <comp-d></comp-d>
            <comp-e></comp-e>
        </div>
    </template>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        components: {
            CompB: {
                template: "#CompB",
                components: {
                    CompD: {
                        template: "<div class='box'><h3>组件D</h3></div>",
                        beforeMount() {
                            console.log("======beforeMount组件D");
                        },
                        mounted() {
                            console.log("======mounted组件D");
                        },
                    },
                    CompE: {
                        template: "<div class='box'><h3>组件E</h3></div>",
                        beforeMount() {
                            console.log("======beforeMount组件E");
                        },
                        mounted() {
                            console.log("======mounted组件E");
                        },
                    },
                },
                beforeMount() {
                    console.log("====beforeMount组件B");
                },
                mounted() {
                    console.log("====mounted组件B");
                },
            },
            CompC: {
                template: "<div class='box'><h3>组件C</h3></div>",
                beforeMount() {
                    console.log("====beforeMount组件C");
                },
                mounted() {
                    console.log("====mounted组件C");
                },
            },
        },
        beforeMount() {
            console.log("==beforeMount组件A");
        },
        mounted() {
            console.log("==mounted组件A");
        },
    });
</script>

</html>